<template>
<xdh-panel class="relationshop-block" theme="primary" title="关系人群" shadow size="small">
<div class="relative">
  <xdh-title title="亲属关系" border theme="primary"></xdh-title>
  <div class="relative-wrap">
    <div class="ctrl-wrap">
      <el-radio-group   size="mini">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="sensitive">敏感人员</el-radio-button>
        <el-radio-button label="parent">父母辈</el-radio-button>
        <el-radio-button label="sibling">同辈</el-radio-button>
        <el-radio-button label="children">子女辈</el-radio-button>
      </el-radio-group>
    </div>
    <div class="person-wrap">
      <div class="person" v-for="i in 6" :key="i">
         
        <xdh-async-img class="thumbnail"  :id="`00000${i}`" ></xdh-async-img>
         
        <div class="id">440104198710085619 </div>
        <div class="info">姓名：黄吉平 [75岁] [父亲]</div>
        <div class="address">福建省厦门市思明区华南东路125号大院C栋206室</div>
      </div>
       
    </div>
  </div>
  
</div>
<div class="social">
  <xdh-title title="社会关系" border theme="primary">
    <template slot="tool">
      <el-button icon="el-icon-edit" size="mini" type="primary"></el-button>
      修改分值模型
      <el-button icon="el-icon-edit" size="mini" type="primary"></el-button>
      图形化展示
      <el-button icon="el-icon-edit" size="mini" type="primary"></el-button>
      详情列表
    </template>
  </xdh-title>
  <div class="social-wrap clearfix">
    <div class="social-person" v-for="i in 4" :key="i"> 
      <xdh-async-img class="left" :id="`00000${i}`" ></xdh-async-img>
      <div class="right">
        <div class="name">黄吉平</div>
        <div class="tags">
          <edit-tags size="small" height="26px" :is-edit="false" :default-tags = "defaultTags"></edit-tags>
        </div>
        <div class="intel">
          <span><em class="el-icon-info"></em>同监狱 1次</span>
          <span><em class="el-icon-info"></em>同宾馆 1次</span>
          <span><em class="el-icon-info"></em>同火车 1次</span>
        </div>
        <div class="key-value-infos-table info">
          <div class="table-item half">
            <strong class="label">身份证</strong>
            <span class="value">440104198710085619</span>
          </div>
          <div class="table-item half">
            <strong class="label">性别</strong>
            <span class="value">男</span>
          </div>
          <div class="table-item half">
            <strong class="label">年龄</strong>
            <span class="value">23</span>
          </div>
          <div class="table-item">
            <strong class="label">地址</strong>
            <span class="value">福建省厦门市思明区华南东路125号大院C栋206室</span>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>
</xdh-panel>
</template>

<style lang="scss" scoped>
@import '../../style/_vars.scss';
@import '../../style/_mixin.scss';
.relative-wrap{
  padding: 5px 10px;
  background: $--background-color-base;
  margin-bottom:20px;
  .person-wrap{
    display: flex;
    flex-flow: row nowrap;
    padding: 10px 0;
    overflow-x: scroll;
    .person{
      flex: 0 0 18%;
      width: 18%;
      min-width: 150px;
      max-width: 200px;
      margin: 0 1%;
      line-height: 1.8; 
      .thumbnail{
        position: relative;
        height: 0;
        padding-top: 110%;
        border: 1px solid $--border-color-base;
      }
      .id{
        text-align: center;
        @include ellipsis;
      }
      .info{
        @include ellipsis;
      }
      .address{
        display: -webkit-box;
        overflow : hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; 
      }
    } 
  }
}
.social{
  padding: 5px 10px;
  // background: $--background-color-base;
  margin-bottom:20px;
  .social-wrap{
    padding: 10px;
    background: $--background-color-base;
    .social-person{
      float: left;
      display: flex;
      // align-items: center;
      width: 49%;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 10px;
      @include shadow(0, 2px, 5px, gray);
      background: white; 
      .left{
        flex: 0 0 120px;
        width: 120px;
        height: 120px;
        border: 1px solid $--border-color-base;
      }
      .right{
        flex: 1;
        padding: 0 10px;
        .name{
          font-weight: 800;
        }
        .intel{
          span{
           margin-right:10px;
            color: $--color-primary;
            em{
              margin-right: 3px;
            }
          }
        }
        .info{
          width: 100%;
        }
      } 
    }
    .social-person:nth-child(odd) {
      margin-right: 2% 
    }
  }  
}
</style>

<script>
import XdhTitle from '@/widgets/xdh-title'
import XdhPanel from '@/widgets/xdh-panel'
import EditTags from '@/components/common/edit-tags'
import XdhAsyncImg from '@/components/common/xdh-async-img/index'
export default {
  name: 'relationship',
  components: {
    XdhPanel,
    XdhTitle,
    EditTags,
    XdhAsyncImg
  },
  props: {
    
    
  },
  data() {
    return {
      defaultTags: [
        '交易异常', '前科', '杀人犯', '放火', '宗教狂热分子'
      ]
      
    }
  },
  computed: {
   
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>

